<template>
	<view class="container">
		<view>
			<!-- <scroll-view scroll-y="true" style="height: 100%;">
				<list ref="refList" url="/api/v1/product" :req="{category_id:category_id,name:name,area_id:address?.id,
				province_id:cityId?.id,city_id:cityId?.id}" res="data.data">
					<template #list="{list}">
						<view class="content-section">
							<view class="sectionBox" v-for="(item,index) in list" :key="index"
								@click="route('pages/lesson/lessonIntro',{id:item.id})">
								<view class="topBanner">
									<image :src="imgUrl(item?.cover?.[0]?.url)"
										style="width: 100%; height: 250rpx;border-radius:12rpx 12rpx 0 0">
									</image>
								</view>
								<view class="textBox">
									<view class="title">{{item.title}}</view>
									<view class="txtAdd01">{{item?.schools[0]?.name}}</view>
									<view class="schoolBox">
										<view class="txtPrice">&yen;{{item.price}}</view>
										<view class="txtNumber">已报名{{item.real_sales}}人</view>
										<button class="blueBtn" v-if="item.is_buy=='1'">立即购买</button>
										<button class="blueBtn" v-if="item.is_buy=='0'">立即预约</button>
									</view>
								</view>
							</view>
						</view>
					</template>
				</list>
			</scroll-view> -->
			
			<scroll-view scroll-y="true" style="height: 100%;">
				<list ref="refList" url="/api/v1/product" :req="{name:name,area_id:area,
				province_id:pro,city_id:city}" res="data.data">
					<template #list="{list}">
						<view class="collectUl">
							<view v-for="(item,index) in list" :key="index" class="collectli"
							@click="route('pages/lesson/lessonIntro',{id:item.id})">
								<view>
									<image :src="imgUrl(item?.cover?.[0]?.url)" style="width: 100%; height: 250rpx;
								border-radius:12rpx 12rpx 0 0">
									</image>
								</view>
								<view class="textBox">
									<view class="title">{{item.title}}</view>
									<view class="txtAdd01">{{item?.schools[0]?.name}}</view>
									<view class="schoolBox">
										<view class="txtPrice" style="color: rgba(49, 192, 237, 1);">&yen;{{item.price}}</view>
										<!-- <view class="txtNumber">已报名{{item.real_sales}}人</view> -->
										<button class="blueBtn" v-if="item.is_buy=='1'">立即购买</button>
										<button class="blueBtn" v-if="item.is_buy=='0'">立即预约</button>
									</view>
								</view>
							</view>
						</view>
					</template>
				</list>
				<!-- 更多内容 -->
			</scroll-view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import route from '@/utils/route';
	import { toast, imgUrl } from '@/utils/fun';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { ref, nextTick } from 'vue';
	import { http, apiPath } from '@/common/http/index';
	import UniArea from '@/components/uni-city/uni-area.vue';
	import list from '@/components/list';
	onLoad(e => {
		name.value = e.name;
		if(e.areaId!=undefined){
			area.value = e.area;
			city.value = e.city;
			pro.value = e.pro;
			console.log("11111111111",)
		}
		get_list()
	});
	//「地址选择器」「地址」「搜索」「菜单」「分页」  「菜单id」
	const [refList, loading, name, area, city, pro] = [ref(), ref(), ref(), ref(), ref(), ref()];
	//获取分页
	const get_list = () => {
		nextTick(() => {
			refList.value.init()
		})
	};
	const collect = (e) => {
		let params = {
			product_id: e,
		}
		http.post(`/api/v1/product/collection`, params, { custom: { loading: true } })
			.then((res : any) => {
				toast('收藏成功！');
				get_list();
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	};
</script>
<style lang="scss" scoped>
	.container {
		background: #fff;
		min-height: 100vh;
	}
	.blueBtn {
		/* margin: 10rpx 0 0; */
		margin: 0;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		opacity: 1;
		color: #fff;
		padding: 0 20rpx;
		border-radius: 198rpx !important;
		background: #31C0ED;
	}

	::v-deep .blueBtn:after {
		border: none;
		border-radius: 99rpx !important;
	}
	.collectUl {
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.collectUl .collectli {
		margin-top: 20rpx;
		width: 48%;
		background: #FAFAFA;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 0
	}

	.collectUl .textBox {
		padding: 10rpx 20rpx;
		line-height: 42rpx;
	}

	.title {
		/* margin-bottom: 5rpx; */
		font-weight: bold;
		font-size: 26rpx;
		color: #000000;
	}

	.txtNumber {
		font-size: 26rpx;
		line-height: 30rpx;
		font-weight: bold;
		color: #31C0ED;
		padding: 5rpx 0 0;
	}

	.schoolBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* margin-top: 10rpx; */
	}

	.txtAdd01 {
		padding-right: 30rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: #999999;
		line-height: 28rpx;
		padding: 6rpx 0;
	}
</style>